<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>19、Vue对数组的操作大全.html</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse
        }

        table tr td {
            border: 1px solid #ccc;
            padding: 10px;
        }

        .container {
            background: #eee;
            padding: 20px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>


<div id="app">
    <div class="container">
        <p>分类ID: <input type="text" v-model="category.id"></p>
        <p>分类标题: <input type="text" v-model="category.title"></p>
        <p>分类排序: <input type="text" v-model="category.sorted"></p>
        <p>
            <button>添加分类</button> &nbsp;&nbsp;&nbsp;
        </p>
    </div>
    <table>
        <thead>
        <tr>
            <td><input type="checkbox"></td>
            <td>ID</td>
            <td>分类名称</td>
            <td>分类排序</td>
            <td>index</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody >
            <template v-for="(category,index) in categoryList" :key="category.id">
                <tr style="background: #eee">
                    <td><input type="checkbox"></td>
                    <td>{{category.id}}</td>
                    <td>{{category.title}}</td>
                    <td>{{category.sorted}}</td>
                    <td>pindex：{{index}} </td>
                    <td><a href="javascript:void(0);">编辑</a> <a href="javascript:void(0);" @click="delProductByIndex(index)">删除</a></td>
                </tr>
                <template  v-for="(cate,cindex) in category.childrenList">
                    <tr>
                        <td><input type="checkbox"></td>
                        <td>{{cate.id}}</td>
                        <td>{{cate.title}}</td>
                        <td>{{cate.sorted}}</td>
                        <td>pindex：{{index}}  -------   childrenIndex：{{cindex}}</td>
                        <td><a href="javascript:void(0);">编辑</a> <a href="javascript:void(0);" @click="delProductByIndex(index)">删除</a></td>
                    </tr>
                </template>
            </template>
        </tbody>
    </table>
</div>

<td colspan="100">

</td>

<script src="js/vue.global.js"></script>
<script>
    var vm = Vue.createApp({
        data() {
            return {
                category:{id:"",title:"",sorted:1},
                categoryList:[
                    {
                        id:1,title:"Java",sorted:1,
                        childrenList:[
                            {id:11,title:"Java面向对象",sorted:1},
                            {id:21,title:"Java是一个王八蛋",sorted:2},
                            {id:31,title:"Java是小狗狗",sorted:3},
                            {id:41,title:"Java是xxx",sorted:4}
                        ]
                    },
                    {
                        id:2,title:"JS",sorted:2,
                        childrenList:[
                            {id:12,title:"JS面向对象",sorted:1},
                            {id:22,title:"JS是一个王八蛋",sorted:2},
                            {id:32,title:"JS是小狗狗",sorted:3},
                            {id:42,title:"JS是xxx",sorted:4}
                        ]
                    },
                    {id:3,title:"Python",sorted:3,childrenList:[]},
                    {id:4,title:"GO",sorted:4,childrenList:[]},
                    {id:5,title:"Ruby",sorted:5,childrenList:[]},
                ]
            }
        },
        methods: {

        }
    }).mount("#app");
</script>
</body>
</html>